<template>
  <div id="line1"></div>
</template>

<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import { Line } from '@antv/g2plot'
import map from '@/model/map'

export default {
  name: 'Line1',
  components: { map },
  data() {
    return {
      data: [],
    }
  },
  mounted() {
  
  },
  async created() {
    this.getmaps()
  },
  methods: {
    async chart(){
      new Line('line1', {
      title: {
        visible: true,
        text: '湿度(%RH)-变化趋势',
      },
      data: this.data,
      forceFit: true,
      seriesField: 'type',
      xField: 'month',
      yField: 'value',
      smooth: true,
      color: ['	#9B30FF','#FFFF00','#FF6347','#4577FF', '#00C292', '#00C108','#21776F', '#076292', '#F68108','#4317FF', '#075192', '#F14108'],
      legend: {
        visible: true,
        position: 'top-right',
      },
      axisLabel: {
        interval: 3,//如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
        rotate: '45',// 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
      },
    }).render()
    },
    async getmaps() {
      // const { StartTime } = this
      // const { EndTime } = this
      const maps = await map.maphumidity()
      this.data = maps
      // for (let i = 0; i < this.maps.legend; i++) {
      //   const index = this.data[i].month.indexOf('T')
      //   this.data[i].month = `${this.data[i].month.slice(0, index)} ${this.data[
      //     i
      //   ].month.slice(index + 1, index + 9)}`
      // }
      this.chart()
        //   this.$message({
        //   showClose: true,
        //   message: maps
        // });

    },
  }
}
</script>

<style scoped></style>
